<template>
  <div class="loading">
    <div class="PersonnelManagement">
      <div class="searchBox">
        <div>
          <div class="searchBoxTitle">选择分区</div>
          <el-input class="search1"
                    placeholder="请输入账号"
                    v-model="tableQuery.zhSearch"></el-input>
        </div>
        <div>
          <div class="searchBoxTitle">选择分区</div>
          <el-input class="search1"
                    placeholder="请输入推荐人"
                    v-model="tableQuery.tjrSearch"></el-input>
        </div>
        <div class="newButton"
             @click="search()">搜索</div>
        <div class="newButton"
             @click="addData()">添加</div>
        <div class="newButton"
             @click="allUnFronze()">全部解冻</div>
        <div class="newButton"
             @click="allFronze()">全部冻结</div>
        <div class="newButton"
             @click="allDelete()">全部删除</div>
      </div>
      <div class="tableBox">
        <el-table v-loading="loading"
                  :data="dataFilter(tableData)"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           width="55"></el-table-column>
          <el-table-column label="序号"
                           width="120">
            <template slot-scope="scope">{{(scope.$index + 1) + ((page - 1) * size)}}</template>
          </el-table-column>
          <el-table-column prop="Name"
                           label="账号"
                           min-width="180">
            <template slot-scope="scope">
              <span title="点击编辑"
                    style="cursor:pointer"
                    @click="editData(scope)">{{scope.row.Name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="Referee"
                           label="推荐人"
                           width="180"></el-table-column>
          <el-table-column prop="Time"
                           label="最近登录时间"
                           width="180"></el-table-column>
          <el-table-column prop="Address"
                           label="登录地址"
                           width="180"></el-table-column>
          <el-table-column prop="Platform"
                           label="登录设备"
                           width="180"></el-table-column>
          <el-table-column prop="LastFreeze.date"
                           label="最近冻结"
                           width="180"></el-table-column>
          <el-table-column prop="LastUnFreeze.date"
                           label="最近解冻"
                           width="180"></el-table-column>
          <!-- <el-table-column prop="State" label="解冻状态" width="100"></el-table-column> -->
          <el-table-column prop="State"
                           label="状态"
                           width="100">
            <template slot-scope="scope">
              <span title="解冻状态"
                    v-if="scope.row.State == 1"
                    style="color:#e6a23c">冻结</span>
              <span title="解冻状态"
                    v-if="scope.row.State == 0"
                    style="color:#67c23a">解冻</span>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           width="250"
                           label-class-name="table_column_title"
                           class-name="table_column_list">
            <template slot-scope="scope">
              <div class="newButtonSmall"
                   @click="editData(scope)">编辑</div>
              <span v-if="scope.row.State == 0">
                <div class="newButtonSmall"
                     @click="prohibitData(scope)">冻结</div>
              </span>
              <span v-if="scope.row.State == 1">
                <div class="newButtonSmall"
                     @click="prohibitData(scope)">解冻</div>
              </span>
              <div class="newButtonSmall"
                   @click="deleteData(scope)">删除</div>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="page">
          <el-pagination background
                         @size-change="sizeChange"
                         @current-change="currentChange"
                         :current-page="page"
                         :page-sizes="sizes"
                         :page-size="size"
                         :layout="layout"
                         :total="tableData.length"></el-pagination>
        </div>
        <!--新增对话框-->
        <el-dialog :title="insertOfUpdateTxt"
                   :visible.sync="dialogFormVisible"
                   :close-on-click-modal="false"
                   :show-close="false"
                   width="650px">
          <div class="registerView">
            <div class="userInfo">
              <div class="userMsg">
                <span>账&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
                <el-input v-model="zhtxt"
                          placeholder="请输入账号"
                          type="text"
                          @blur="zhBlur"></el-input>
              </div>
              <div class="zhhelp"
                   ref="zhRef">账号不能为空</div>
              <div class="userMsg">
                <span>密&nbsp;&nbsp;&nbsp;&nbsp;码：</span>
                <el-input v-model="mmtxt"
                          placeholder="请输入密码"
                          type="password"
                          @blur="mmBlur"></el-input>
              </div>
              <div class="mmhelp"
                   ref="mmRef">密码不能为空</div>
              <div class="userMsg">
                <span>昵&nbsp;&nbsp;&nbsp;&nbsp;称：</span>
                <el-input v-model="nctxt"
                          placeholder="请输入昵称"
                          type="text"
                          @blur="ncBlur"></el-input>
              </div>
              <div class="nchelp"
                   ref="ncRef">昵称不能为空</div>
              <div class="userMsg">
                <span>电&nbsp;&nbsp;&nbsp;&nbsp;话：</span>
                <el-input v-model="dhtxt"
                          placeholder="请输入电话"
                          type="text"
                          @blur="dhBlur"></el-input>
              </div>
              <div class="dhhelp"
                   ref="dhRef">电话不能为空</div>
              <div class="userMsg">
                <span>IM地址：</span>
                <el-input v-model="dztxt"
                          placeholder="请输入地址"
                          type="text"
                          @blur="dzBlur"></el-input>
              </div>
              <div class="dzhelp"
                   ref="dzRef">地址不能为空</div>
              <div class="userMsg">
                <span>邮&nbsp;&nbsp;&nbsp;&nbsp;箱：</span>
                <el-input v-model="yxtxt"
                          placeholder="请输入邮箱"
                          type="text"
                          @blur="yxBlur"></el-input>
              </div>
              <div class="yxhelp"
                   ref="yxRef">邮箱不能为空</div>
              <div class="userMsg">
                <span>推荐人：</span>
                <el-input v-model="tjrtxt"
                          placeholder="请输入推荐人"
                          type="text"
                          @blur="tjrBlur"></el-input>
              </div>
              <div class="tjrhelp"
                   ref="tjrRef">推荐人不能为空</div>
              <div class="question">
                <span>问题一：{{question1}}</span>
              </div>
              <div class="userMsg">
                <span style="visibility: hidden">问题一：</span>
                <el-input v-model="wtytxt"
                          placeholder="请输入密保答案"
                          type="text"
                          @blur="wtyBlur"></el-input>
              </div>
              <div class="wtyhelp"
                   ref="wtyRef">密保问题不能为空</div>
              <div class="question">
                <span>问题二：{{question2}}</span>
              </div>
              <div class="userMsg">
                <span style="visibility: hidden">问题二：</span>
                <el-input v-model="wtetxt"
                          placeholder="请输入密保答案"
                          type="text"
                          @blur="wteBlur"></el-input>
              </div>
              <div class="wtehelp"
                   ref="wteRef">密保问题不能为空</div>
              <div class="question">
                <span>问题三：{{question3}}</span>
              </div>
              <div class="userMsg">
                <span style="visibility: hidden">问题三：</span>
                <el-input v-model="wtstxt"
                          placeholder="请输入密保答案"
                          type="text"
                          @blur="wtsBlur"></el-input>
              </div>
              <div class="wtshelp"
                   ref="wtsRef">密保问题不能为空</div>
              <div class="userMsg">
                <span>人员类型：</span>
                <el-select v-model="value"
                           placeholder="请选择"
                           style="width:470px"
                           @blur="rylxBlur">
                  <el-option v-for="item in options"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </div>
              <div class="rylxhelp"
                   ref="rylxRef">人员类型不能为空</div>

              <div slot="footer"
                   class="dialog-footer"
                   align="center">
                <el-button type="primary"
                           @click="handleRegister()">注 册</el-button>
                <el-button @click="cancel()">取 消</el-button>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import * as sysTool from '../../../js/systemTool'
import * as cookie from '../../../js/cookie'
import register from '../Register/Register'
export default {
  name: 'PersonnelManagement',
  data () {
    return {
      loading: true,
      dialogFormVisible: false, // 编辑对话框
      tableData: [], // 表格数据
      tableQuery: {
        zhSearch: '',
        tjrSearch: ''
      },
      sizes: [10, 20, 50],
      layout: 'total, sizes, prev, pager, next, jumper',
      page: 1, // 按翻页
      size: 10, // 每页几条
      multipleSelection: [],
      allChicket: [],
      ip: '1.1.1.1',
      area: '北京市',
      brower: 'chrome',
      os: 'windows7',
      result: null,
      question1: '',
      question2: '',
      question3: '',
      zhtxt: '',
      mmtxt: '',
      nctxt: '',
      dhtxt: '',
      dztxt: '',
      yxtxt: '',
      tjrtxt: '',
      wtytxt: '',
      wtetxt: '',
      wtstxt: '',
      zttxt: '',
      options: [{
        value: '管理员',
        label: '管理员'
      }, {
        value: '会员',
        label: '会员'
      }, {
        value: '操作员',
        label: '操作员'
      }, {
        value: '产品录入员',
        label: '产品录入员'
      }],
      value: '操作员',
      insertOfUpdate: '',
      insertOfUpdateTxt: '',
      insertOfUpdateUrl: ''
    }
  },

  methods: {
    // 初始化获取数据
    init () {
      this.getTableList()
    },
    // 展示所有信息
    getTableList () {
      this.loading = true
      var brower = sysTool.GetCurrentBrowser()
      var os = sysTool.GetOs()
      var username = cookie.getCookie('userAccountNumber')
      var password = cookie.getCookie('userAccountPassword')
      var data = {
        Method: 'GetAllMember',
        Name: username,
        Password: password,
        Device_ID: os,
        Platform: brower,
        SonAccount: this.tableQuery.zhSearch,
        Refeere: this.tableQuery.tjrSearch
      }
      var msg = JSON.stringify(data)
      var data2 = new FormData()
      data2.append('content', msg)
      let url = '/api/member/reg_member.php'
      this.axios.post(url, data2).then((res) => {
        var mycars = res.data.Data
        let num = 1
        if (mycars != null) {
          for (const item of mycars) {
            item.num = num++
          }
          this.tableData = mycars
        }
        setTimeout(() => {
          this.loading = false
        }, 1.5 * 1000)
      })
    },
    search () {
      this.getTableList()
    },
    // 复选框内容
    handleSelectionChange (val) {
      this.allChicket = []
      this.multipleSelection = val
      for (var i = 0; i < this.multipleSelection.length; i++) {
        this.allChicket.push(this.multipleSelection[i].Name)
      }
    },
    // 全部冻结
    allFronze () {
      if (this.allChicket.length < 1) {
        this.$message.error('请先选择要操作的项目')
        return false
      }
      var brower = sysTool.GetCurrentBrowser()
      var os = sysTool.GetOs()
      var username = cookie.getCookie('userAccountNumber')
      var password = cookie.getCookie('userAccountPassword')
      var data = {
        Method: 'FreezeMember',
        Name: username,
        Password: password,
        Data: this.allChicket,
        Device_ID: os,
        Platform: brower
      }
      var msg = JSON.stringify(data)
      var data2 = new FormData()
      data2.append('content', msg)
      let url = 'api/member/reg_member.php'
      this.axios.post(url, data2).then((res) => {
        var resl = res.data
        if (resl.Result === 'OK') {
          this.$message({
            message: res.data.Message,
            type: 'success'
          })
          this.init()
        } else {
          this.$message({
            message: res.data.Message,
            type: 'error'
          })
        }
      })
    },
    // 全部解冻
    allUnFronze () {
      if (this.allChicket.length < 1) {
        this.$message.error('请先选择要操作的项目')
        return false
      }
      var brower = sysTool.GetCurrentBrowser()
      var os = sysTool.GetOs()
      var username = cookie.getCookie('userAccountNumber')
      var password = cookie.getCookie('userAccountPassword')
      var data = {
        Method: 'UnFreezeMember',
        Name: username,
        Password: password,
        Data: this.allChicket,
        Device_ID: os,
        Platform: brower
      }
      var msg = JSON.stringify(data)
      var data2 = new FormData()
      data2.append('content', msg)
      let url = 'api/member/reg_member.php'
      this.axios.post(url, data2).then((res) => {
        var resl = res.data
        if (resl.Result === 'OK') {
          this.$message({
            message: res.data.Message,
            type: 'success'
          })
          this.init()
        } else {
          this.$message({
            message: res.data.Message,
            type: 'error'
          })
        }
      })
    },
    // 全部删除
    allDelete () {
      if (this.allChicket.length < 1) {
        this.$message.error('请先选择要操作的操作员')
        return false
      }
      var brower = sysTool.GetCurrentBrowser()
      var os = sysTool.GetOs()
      var username = cookie.getCookie('userAccountNumber')
      var password = cookie.getCookie('userAccountPassword')
      var data = {
        Method: 'RemoveMemberWeb',
        Name: username,
        Password: password,
        Data: this.allChicket,
        Device_ID: os,
        Platform: brower
      }
      var msg = JSON.stringify(data)
      var data2 = new FormData()
      data2.append('content', msg)
      let url = 'api/member/reg_member.php'
      this.axios.post(url, data2).then((res) => {
        var resl = res.data
        if (resl.Result === 'OK') {
          this.$message({
            message: res.data.Message,
            type: 'success'
          })
          this.init()
        } else {
          this.$message({
            message: res.data.Message,
            type: 'error'
          })
        }
      })
    },

    // 添加数据
    addData () {
      this.zhtxt = ''
      this.nctxt = ''
      this.mmtxt = ''
      this.imtxt = ''
      this.brower = ''
      this.os = ''
      this.dhtxt = ''
      this.yxtxt = ''
      this.tjrtxt = ''
      this.wtytxt = ''
      this.wtetxt = ''
      this.wtstxt = ''
      this.dztxt = ''
      this.imtxt = '暂定字符串'
      this.insertOfUpdate = 'Register'
      this.insertOfUpdateTxt = '人员添加'
      this.insertOfUpdateUrl = 'api/member/reg_member.php'
      this.reqRegister()
      this.dialogFormVisible = true
    },
    // 修改数据
    editData (scope) {
      var form = JSON.parse(JSON.stringify(scope.row))
      this.zhtxt = form.Name
      this.tjrtxt = form.Referee
      this.insertOfUpdate = 'ChangeInfo'
      this.insertOfUpdateTxt = '人员更改'
      this.insertOfUpdateUrl = 'api/member/changeinfo.php'
      this.dialogFormVisible = true
    },

    // 冻结解冻
    prohibitData (scoped) {
      var state = scoped.row.State
      var MethodTxt = ''
      if (state === 0) {
        MethodTxt = 'FreezeMember'
      } else if (state === 1) {
        MethodTxt = 'UnFreezeMember'
      }
      var brower = sysTool.GetCurrentBrowser()
      var os = sysTool.GetOs()
      var username = cookie.getCookie('userAccountNumber')
      var password = cookie.getCookie('userAccountPassword')
      var data = {
        Method: MethodTxt,
        Name: username,
        Password: password,
        Data: [scoped.row.Name],
        Device_ID: os,
        Platform: brower
      }
      var msg = JSON.stringify(data)
      var data2 = new FormData()
      data2.append('content', msg)
      let url = 'api/member/reg_member.php'
      this.axios.post(url, data2).then((res) => {
        var resl = res.data
        if (resl.Result === 'OK') {
          if (state === 0) {
            this.tableData[scoped.row.num - 1].State = 1
          } else if (state === 1) {
            this.tableData[scoped.row.num - 1].State = 0
          }
          this.$message({
            message: res.data.Message,
            type: 'success'
          })
        } else {
          this.$message({
            message: res.data.Message,
            type: 'error'
          })
        }
      })
    },
    // 删除数据
    deleteData (scoped) {
      var brower = sysTool.GetCurrentBrowser()
      var os = sysTool.GetOs()
      var username = cookie.getCookie('userAccountNumber')
      var password = cookie.getCookie('userAccountPassword')
      var data = {
        Method: 'RemoveMemberWeb',
        Name: username,
        Password: password,
        Data: [scoped.row.Name],
        Device_ID: os,
        Platform: brower
      }
      var msg = JSON.stringify(data)
      var data2 = new FormData()
      data2.append('content', msg)
      let url = 'api/member/reg_member.php'
      this.axios.post(url, data2).then((res) => {
        var resl = res.data
        if (resl.Result === 'OK') {
          this.$message({
            message: res.data.Message,
            type: 'success'
          })
          this.init()
        } else {
          this.$message({
            message: res.data.Message,
            type: 'error'
          })
        }
      })
    },
    // 取消修改
    cancel () {
      this.insertOfUpdate = ''
      this.zhtxt = ''
      this.nctxt = ''
      this.mmtxt = ''
      this.brower = ''
      this.os = ''
      this.imtxt = ''
      this.dhtxt = ''
      this.yxtxt = ''
      this.tjrtxt = ''
      this.wtytxt = ''
      this.wtetxt = ''
      this.wtstxt = ''
      this.dztxt = ''
      this.dialogFormVisible = false
    },

    // 处理表格数据
    dataFilter (data) {
      return data.filter(
        (e, i) => i >= (this.page - 1) * this.size && i < this.page * this.size
      )
    },
    // 每页显示条数修改
    sizeChange (size) {
      this.size = size
    },
    // 切换分页
    currentChange (page) {
      this.page = page
    },
    // 进入页面时获取要登录验证的参数项 密保
    reqRegister () {
      var data = {
        Method: 'ReqRegister'
      }
      var msg = JSON.stringify(data)
      var data2 = new FormData()
      data2.append('content', msg)
      var url = 'api/member/reg_member.php'
      this.axios.post(url, data2).then((res) => {
        this.result = res.data.Data
        this.question1 = this.result[0].Question
        this.question2 = this.result[1].Question
        this.question3 = this.result[2].Question
      }).catch(error => {
        console.log(error)
        this.$message.error('验证问题失败，请联系管理员！')
      })
    },
    // 点击注册按钮
    handleRegister () {
      // 账号注册校验
      if (this.zhtxt === '') {
        this.$refs.zhRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '账号不能为空'
        })
        return false
      }
      if (this.zhtxt.length < 6) {
        this.$message({
          type: 'error',
          message: '账号最小长度为6位'
        })
        return false
      }
      // 密码注册校验
      if (this.mmtxt === '') {
        this.$refs.mmRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '密码不能为空'
        })
        return false
      }
      if (this.mmtxt.length < 6) {
        this.$message({
          type: 'error',
          message: '密码最小长度为6位'
        })
        return false
      }
      // 昵称注册校验
      if (this.nctxt === '') {
        this.$refs.ncRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '昵称不能为空'
        })
        return false
      }

      // 地址注册校验
      if (this.dztxt === '') {
        this.$refs.dzRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '地址不能为空'
        })
        return false
      }

      // 密保注册校验
      if (this.wtytxt === '') {
        this.$refs.zhRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '问题一不能为空'
        })
        return false
      }
      // 密保注册校验
      if (this.wtetxt === '') {
        this.$refs.wteRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '问题二不能为空'
        })
        return false
      }
      // 密保注册校验
      if (this.wtstxt === '') {
        this.$refs.wtsRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '问题三不能为空'
        })
        return false
      }
      // 人员类型注册校验
      if (this.rylxtxt === '') {
        this.$refs.rylxRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '人员类型不能为空'
        })
        return false
      }

      // 推荐人注册校验
      if (this.tjrtxt === '') {
        this.$refs.tjrRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '昵称不能为空'
        })
        return false
      }
      if (this.tjrtxt.length < 6) {
        this.$message({
          type: 'error',
          message: '推荐人账号最小长度为6位'
        })
        return false
      }

      // 手机号码注册校验
      if (this.dhtxt === '') {
        this.$refs.dhRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '电话不能为空'
        })
        return false
      }
      var mobile = this.dhtxt
      var tel = /^0\d{2,3}-?\d{7,8}$/
      var phone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/
      if (mobile.length === 11) { // 手机号码
        if (phone.test(mobile)) {
          this.$refs.dhRef.style.visibility = 'hidden'
        }
      } else if (mobile.length === 13 && mobile.indexOf('-') !== -1) { // 电话号码
        if (tel.test(mobile)) {
          this.$refs.dhRef.style.visibility = 'hidden'
        }
      } else {
        this.$message({
          type: 'error',
          message: '请输入有效的电话或手机号码！'
        })
        return false
      }
      // 邮箱注册校验
      if (this.yxtxt === '') {
        this.$refs.yxRef.style.visibility = 'visible'
        this.$message({
          type: 'error',
          message: '邮箱不能为空'
        })
        return false
      }
      var email = this.yxtxt
      var reg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/
      if (reg.test(email)) {
        this.$refs.yxRef.style.visibility = 'hidden'
      } else {
        this.$message({
          type: 'error',
          message: '请输入有效的邮箱地址！'
        })
        return false
      }

      // 注册按钮等待效果初始化
      const loading = this.$loading({
        lock: true,
        text: '更改成功，请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      // 请求接口
      setTimeout(() => {
        // 获取本机信息
        this.brower = sysTool.GetCurrentBrowser()
        this.os = sysTool.GetOs()
        var data
        // 判断点击的是编辑还是添加
        if (this.insertOfUpdate === 'Register') {
          data = {
            Method: this.insertOfUpdate,
            Name: this.zhtxt,
            Nickname: this.nctxt,
            Password: this.mmtxt,
            Device_ID: this.brower,
            Platform: this.os,
            Type: this.value,
            Tel: this.dhtxt,
            IM: this.dztxt,
            Email: this.yxtxt,
            Referee: this.tjrtxt,
            Answer1: this.wtytxt,
            Answer2: this.wtetxt,
            Answer3: this.wtstxt
          }
        } else if (this.insertOfUpdate === 'ChangeInfo') {
          data = {
            Method: this.insertOfUpdate,
            Name: this.zhtxt,
            NickName: this.nctxt,
            Password: this.mmtxt,
            Device_ID: this.brower,
            Platform: this.os,
            Data: {
              Password: this.mmtxt,
              NickName: this.nctxt,
              Tel: this.dhtxt,
              IM: this.dztxt,
              Email: this.yxtxt
            }
          }
        }
        var msg = JSON.stringify(data)
        var data2 = new FormData()
        data2.append('content', msg)
        var url = this.insertOfUpdateUrl
        this.axios.post(url, data2).then((res) => {
          if (res.data.Result === 'OK') {
            this.insertOfUpdate = ''
            this.dialogFormVisible = false
            this.init()
          } else {
            this.$message({
              message: res.data.Message,
              type: 'warning'
            })
          }
        }).catch(error => {
          this.$message.error('注册失败,请联系管理员')
          console.log(error)
        })
        loading.close()
      }, 2000)
    },
    // 账号失去焦点
    zhBlur () {
      if (this.zhtxt.length === 0) {
        this.$refs.zhRef.style.visibility = 'visible'
        return false
      } else {
        this.$refs.zhRef.style.visibility = 'hidden'
      }
      if (this.zhtxt.length >= 6) {
        this.$refs.zhRef.style.visibility = 'hidden'
      } else {
        this.$refs.zhRef.innerHTML = '账号最小长度为6位'
        this.$refs.zhRef.style.visibility = 'visible'
      }
    },
    // 密码失去焦点
    mmBlur () {
      if (this.mmtxt === '') {
        this.$refs.mmRef.style.visibility = 'visible'
        return false
      } else {
        this.$refs.mmRef.style.visibility = 'hidden'
      }
      if (this.mmtxt.length >= 6) {
        this.$refs.mmRef.style.visibility = 'hidden'
      } else {
        this.$refs.mmRef.innerHTML = '密码最小长度为6位'
        this.$refs.mmRef.style.visibility = 'visible'
      }
    },
    // 昵称失去焦点
    ncBlur () {
      if (this.nctxt === '') {
        this.$refs.ncRef.style.visibility = 'visible'
      } else {
        this.$refs.ncRef.style.visibility = 'hidden'
      }
    },
    // 电话失去焦点
    dhBlur () {
      if (this.dhtxt === '') {
        this.$refs.dhRef.style.visibility = 'visible'
        return false
      } else {
        this.$refs.dhRef.style.visibility = 'hidden'
      }
      var mobile = this.dhtxt
      var tel = /^0\d{2,3}-?\d{7,8}$/
      var phone = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/
      if (mobile.length === 11) { // 手机号码
        if (phone.test(mobile)) {
          this.$refs.dhRef.style.visibility = 'hidden'
        }
      } else if (mobile.length === 13 && mobile.indexOf('-') !== -1) { // 电话号码
        if (tel.test(mobile)) {
          this.$refs.dhRef.style.visibility = 'hidden'
        }
      } else {
        this.$refs.dhRef.innerHTML = '请输入有效的电话或手机号码！'
        this.$refs.dhRef.style.visibility = 'visible'
      }
    },
    // 地址失去焦点
    dzBlur () {
      if (this.dztxt === '') {
        this.$refs.dzRef.style.visibility = 'visible'
      } else {
        this.$refs.dzRef.style.visibility = 'hidden'
      }
    },
    // 邮箱失去焦点
    yxBlur () {
      if (this.yxtxt === '') {
        this.$refs.yxRef.style.visibility = 'visible'
        return false
      } else {
        this.$refs.yxRef.style.visibility = 'hidden'
      }
      var email = this.yxtxt
      var reg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/
      if (reg.test(email)) {
        this.$refs.yxRef.style.visibility = 'hidden'
      } else {
        this.$refs.yxRef.innerHTML = '邮箱格式不正确！'
        this.$refs.yxRef.style.visibility = 'visible'
      }
    },
    // 推荐人失去焦点
    tjrBlur () {
      if (this.tjrtxt === '') {
        this.$refs.tjrRef.style.visibility = 'visible'
        return false
      } else {
        this.$refs.tjrRef.style.visibility = 'hidden'
      }
      if (this.tjrtxt.length >= 6) {
        this.$refs.tjrRef.style.visibility = 'hidden'
      } else {
        this.$refs.tjrRef.innerHTML = '推荐人账号最小长度为6位'
        this.$refs.tjrRef.style.visibility = 'visible'
      }
    },
    // 问题失去焦点
    wtyBlur () {
      if (this.wtytxt === '') {
        this.$refs.wtyRef.style.visibility = 'visible'
      } else {
        this.$refs.wtyRef.style.visibility = 'hidden'
      }
    },
    // 问题失去焦点
    wteBlur () {
      if (this.wtetxt === '') {
        this.$refs.wteRef.style.visibility = 'visible'
      } else {
        this.$refs.wteRef.style.visibility = 'hidden'
      }
    },
    // 问题失去焦点
    wtsBlur () {
      if (this.wtstxt === '') {
        this.$refs.wtsRef.style.visibility = 'visible'
      } else {
        this.$refs.wtsRef.style.visibility = 'hidden'
      }
    },
    // 人员类型失去焦点
    rylxBlur () {
      if (this.value === '') {
        this.$refs.rylxRef.style.visibility = 'visible'
      } else {
        this.$refs.rylxRef.style.visibility = 'hidden'
      }
    }
  },
  mounted () {
    this.init()
  },
  components: {
    register
  }
}
</script>
<style scoped>
.ManagementPage {
  width: 100%;
  min-height: 100%;
  background: #003a62;
  box-sizing: border-box;
}
.title {
  margin-bottom: 30px;
}
.userInfo {
  position: relative;
  width: 550px;
  padding: 35px;
}
.userMsg {
  display: flex;
  font-size: 14px;
  height: 35px;
  margin-bottom: 10px;
}
.userMsg span {
  line-height: 35px;
  margin-right: 10px;
}
.userMsg .el-input {
  flex: 1;
}
.question {
  height: 30px;
}
.zhhelp {
  position: relative;
  top: -5px;
  left: 70px;
  color: red;
  font-size: 10px;
  visibility: hidden;
}
.mmhelp {
  position: relative;
  top: -5px;
  left: 70px;
  color: red;
  font-size: 10px;
  visibility: hidden;
}
.nchelp {
  position: relative;
  top: -5px;
  left: 70px;
  color: red;
  font-size: 10px;
  visibility: hidden;
}
.dhhelp {
  position: relative;
  top: -5px;
  left: 70px;
  color: red;
  font-size: 10px;
  visibility: hidden;
}
.dzhelp {
  position: relative;
  top: -5px;
  left: 70px;
  color: red;
  font-size: 10px;
  visibility: hidden;
}
.yxhelp {
  position: relative;
  top: -5px;
  left: 70px;
  color: red;
  font-size: 10px;
  visibility: hidden;
}
.tjrhelp {
  position: relative;
  top: -5px;
  left: 70px;
  color: red;
  font-size: 10px;
  visibility: hidden;
}
.wtyhelp {
  position: relative;
  top: -5px;
  left: 67px;
  color: red;
  font-size: 10px;
  visibility: hidden;
}
.wtehelp {
  position: relative;
  top: -5px;
  left: 67px;
  color: red;
  font-size: 10px;
  visibility: hidden;
}
.wtshelp {
  position: relative;
  top: -5px;
  left: 67px;
  color: red;
  font-size: 10px;
  visibility: hidden;
}
.rylxhelp {
  position: relative;
  top: -5px;
  left: 80px;
  color: red;
  font-size: 10px;
  visibility: hidden;
}
</style>
